<template>
  <div>
    <code-mirror ref="codemirror" :value="content" :height="'400px'"></code-mirror>
    <el-button type="primary" @click=formatSql>格式化</el-button>

  </div>
</template>

<script>
import CodeMirror from '@/views/test/vueCodemirror/vueCodemirror'
import sqlFormatter from 'sql-formatter';

export default {
  name: "CollectTask",
  components: {
    CodeMirror
  },
  data(){
    return{
      content: ''
    }
  },
  methods: {
    formatSql() {
      /*（sql编辑器内容绑定content参数） 将sql内容进行格式后放入编辑器中*/
      this.content = sqlFormatter.format('SELECT * FROM tbl');
      // this.content = sqlFormatter.format(this.content);
      console.log('this.content: ', this.content)
    }
  }
}
</script>

<style>

</style>